<template>
  <el-container id="app-container">
    <el-header class="app-header">
      <div class="header-content">
        <div class="app-title"><span id="span1"><img width="35px" height="28px" src="@/assets/images/top.png" alt="Logo">&nbsp;&nbsp; 管理系统</span></div>
        <div class="user-info">
          <i class="el-icon-user-solid" style="margin-right: 5px;"></i>
          {{ userName }}
          <el-button type="text" @click="handleLogout" style="margin-left: 15px;top:5px">退出登录</el-button>
        </div>
      </div>
    </el-header>
    <el-container class="content-container">
      <el-aside width="200px" class="app-sidebar">
        <Sidebar :key="sidebarKey" />
      </el-aside>
      <el-main class="app-main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Sidebar from './components/Sidebar.vue';
import { MessageBox } from 'element-ui';

export default {
  name: 'App',
  components: {
    Sidebar
  },
  data() {
    return {
      userName: localStorage.getItem('user') || '未知身份',
      isCollapse: false,
      activeIndex: '1',
      isLoggedIn: localStorage.getItem('isLoggedIn') === 'true',
      sidebarKey: 0
    };
  },

  methods: {
    handleLogout() {
      MessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定，执行退出操作
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        localStorage.removeItem('role');
        localStorage.removeItem('isLoggedIn');
        // 强制重新创建侧边栏组件
        this.sidebarKey++;
        this.$router.push('/');
        this.$message.success('退出成功');
      }).catch(() => {
        // 用户点击取消，不做任何操作
        this.$message.info('已取消退出');
      });
    },
    getUserName() {
      this.userName = localStorage.getItem('user') || '访客';
      console.log(this.userName);
    }
  },
  watch: {
    // 监听路由变化
    $route(to, from) {
      // 如果从登录页跳转到其他页面，说明登录成功
      if (from.path === '/' && to.path !== '/') {
        this.userName = localStorage.getItem('user') || '未知身份';
        this.isLoggedIn = true;
        // 强制重新创建侧边栏组件
        this.sidebarKey++;
        console.log('用户登录，重新创建侧边栏，key:', this.sidebarKey);
      }
    }
  },
  created() {
    // 只在组件创建时获取一次用户名
    this.userName = localStorage.getItem('user') || '未知身份';
  },
}
</script>

<style>
html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#app-container {
  height: 100%;
}
#span1 {
  size:5px;
  color:#6D97FD;
  display: flex;
  align-items: center;
}
.app-header {
  background-color: #fff; /* 或者您的头部背景色 */
  color: #333; /* 或者您的头部文字颜色 */
  line-height: 60px; /* 与element-ui的header高度一致 */
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.app-title {
  font-size: 20px;
  font-weight: bold;
}

.user-info {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  font-size: 14px;
}

.user-info .el-button {
  margin-left: 15px; /* 调整按钮和用户名之间的间距 */
}

.content-container {
  height: calc(100vh - 60px); /* 减去头部高度 */
}

.app-sidebar {
  background-color: #fff; /* 侧边栏背景色 */
  border-top:1px solid #F1F1F1;
  /* Element UI el-aside has default width, adjust if needed */
}

.app-main {
  background-color: #f0f2f5; /* 主内容区域背景色 */
  padding: 20px; /* 主内容区域内边距 */
}

/* Remove old styles */
/*
.full-screen-container {
  display: flex;
  height: 100%;
  width: 100;
}
*/
</style>
